<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
</head>
<body>
    <!-- 
        form表单
        1.action属性：表单提交的地址，一般指的是后台的url接口地址
        2.method属性：默认Get方式 ， Get/Post
        Get方式特点：
            1.地址栏会显示表单数据  url?username=李思思&password=123#
            2.不建议使用get方式操作隐秘数据
            3.不适合提交数据量大的
        Post方式特点：
            1.地址栏不显示数据
            2.适合提交隐秘数据，也适合提交大量数据
    -->
    <!-- 
        input 标签，单标签，不会换行，表单元素
        1.type属性：
            1.1 text   普通文本
            1.2 password 密码文本
            1.3 submit 提交表单的按钮
            1.4 reset  重置表单的按钮
        2.value属性：值
        3.class属性、id属性：方便给CSS、JS操作
        4.placeholder属性：搭配type的值是text和password一起使用的，提示信息
        5.name属性：表单元素，必须提供name，浏览器才会收集表单数据
    -->
    <form action="#" method="POST">
        <table border="1px" cellspacing="0" cellpadding="6px" align="center">
            <caption><h3>登录界面</h3></caption>
            <tr>
                <td>姓    名</td>
                <td><input type="text" placeholder="请输入姓名" name="username" /></td>
            </tr>
            <tr>
                <td>密    码</td>
                <td><input type="password" placeholder="请输入密码" name="password" /></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>